<template>
	<!-- 忘记密码 -->
	<view class="forgotpasswordBox">
		<view class="card">
			<u--form labelPosition="left" :labelWidth="80" :model="formModel" ref="formModel">
				<u-form-item label="用户名:" prop="userInfo.username" borderBottom ref="item1">
					<u--input clearable type="number" v-model="formModel.userInfo.username"
						placeholder="请输入您的用户名"></u--input>
				</u-form-item>
				<u-form-item label="验证码:" prop="userInfo.code" borderBottom ref="item1">
					<u--input clearable type="number" v-model="formModel.userInfo.code" placeholder="请输入验证码">
						<template #suffix>
							<up-code ref="uCode" @change="codeChange" seconds="60" changeText="60秒重新获取"></up-code>
							<up-button @tap="getCode" :text="tips" type="primary" size="mini"></up-button>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item label="新密码:" prop="userInfo.password" borderBottom ref="item1">
					<u--input clearable type="password" v-model="formModel.userInfo.password"
						placeholder="请输入您的新密码"></u--input>
				</u-form-item>
				<u-form-item label="确认密码:" prop="userInfo.confirmPassword" borderBottom ref="item1">
					<u--input clearable type="password" v-model="formModel.userInfo.confirmPassword"
						placeholder="请输入再次输入新密码"></u--input>
				</u-form-item>
				<u-form-item>
					<view style="display: flex; justify-content: flex-end;margin-top: 30rpx;">
						<u-button type="error" size="small" text="重置" :customStyle="customStyle" @click="restmit"></u-button>
						<u-button type="primary" size="small" text="确定" @click="submit"
							:customStyle="customStyle"></u-button>
					</view>


				</u-form-item>
			</u--form>
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script setup>
	import {
		onMounted,
		nextTick,
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	let {
		proxy
	} = getCurrentInstance();
	import {
		onReady,
		onShow
	} from "@dcloudio/uni-app";
	const customStyle = reactive({
		width: '200rpx',
	})
	const formModel = reactive({
		userInfo: {
			username: '',
			code: '',
			password: '',
			confirmPassword: ''
		}
	})
	const rules = reactive({
		'userInfo.username': [{
				type: 'string',
				required: true,
				message: '请填写用户名',
				trigger: ['blur', 'change'],
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		],

		'userInfo.code': {
			type: 'string',
			required: true,
			message: '请填写验证码',
			trigger: ['blur', 'change'],
		},
		'userInfo.password': {
			type: 'string',
			required: true,
			message: '请填写密码',
			trigger: ['blur', 'change'],
		},
		'userInfo.confirmPassword': [{
				type: 'string',
				required: true,
				message: '请再次填写密码',
				trigger: ['blur', 'change'],
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					if (formModel.userInfo.password !== value) {
						return false
					} else {
						return true;
					}

				},
				message: '两次密码不一致',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		]




	})
	const tips = ref('')
	const codeChange = (text) => {
		tips.value = text
	}
	const getCode = () => {
		
		if(formModel.userInfo.username!=''){
			if (proxy.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				
				let opts = {
					url: proxy.$api.getCode,
					method: "get",
				};
				let data = {
					mobile: formModel.userInfo.username,
					
				
				};
				proxy.$request.baseRequest(opts, data).then((res) => {
					if (res.data.code === 200) {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						proxy.$refs.uCode.start();
					}else{
						proxy.$refs.uToast.show({
							type: 'error',
							message: res.data.message
						})
					}
				}).catch((err) => {
					proxy.$refs.uToast.show({
						type: 'error',
						message: err.message
					})
				})
				
				
				
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		}else{
			uni.$u.toast('请先输入您的用户名');
		}
	
	}
	// 重置
	const restmit = ()=>{
		proxy.$refs.formModel.resetFields()
	}
	// 提交
	const submit = () => {
		proxy.$refs.formModel.validate().then(res => {
			let opts = {
				url: proxy.$api.setNewPw,
				method: "post",
			};
			let data = {
				mobile: formModel.userInfo.username,
				newPass:formModel.userInfo.password,
				code:formModel.userInfo.code
				
			
			};
			proxy.$request.baseRequest(opts, data).then((res) => {
				if (res.data.code === 200) {
					setTimeout(()=>{
						proxy.$refs.uToast.show({
							type: 'success',
							message: res.data.massage
						})
					},1500)
					uni.navigateBack();
				}else{
					proxy.$refs.uToast.show({
						type: 'error',
						message: res.data.message
					})
				}
			}).catch((err) => {
				proxy.$refs.uToast.show({
					type: 'error',
					message: err.message
				})
			})
			
		}).catch(errors => {
			uni.$u.toast('校验失败')
		})
	}
	onShow(() => {
		nextTick(() => {
			proxy.$refs.formModel.setRules(rules)
		})
	})
</script>
<style lang="scss">
	page {
		background: #F1F5F5;
	}
</style>
<style lang="scss">
	.forgotpasswordBox {
		padding: 18rpx;
		box-sizing: border-box;

		.card {
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 700rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 4rpx 4rpx 4rpx 4rpx;


		}
	}
</style>